<template>
  <div>
    <div class="common-secondary-header">
      <i v-if="required" class="isDot"></i>
      <span class="flex-1">{{ title }}</span>
      <svg-icon
        :name="visible ? 'ic-arrow-up' : 'ic-arrow-down'"
        class="mr-[8px] !h-[16px] !w-[16px]"
        @click="onCollapse"
      />
    </div>
    <el-collapse-transition>
      <div v-show="visible" class="pb-[24px]">
        <slot></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: "CommonSecondaryHeader",
  props: {
    title: {
      type: String,
      default: "基本信息",
    },
    // 是否必填带星号
    required: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: true,
    };
  },
  methods: {
    onCollapse() {
      this.visible = !this.visible;
    },
  },
};
</script>

<style scoped lang="scss">
//二级标签样式
.common-secondary-header {
  display: flex;
  align-items: center;
  height: 32px;
  padding-left: 16px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #363f51;
  background: rgb(241 242 245 / 0.5);

  &::before {
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 8px;
    line-height: 16px;
    background-color: #1d7ff2;
    border-radius: 0 3px 3px 0;
    content: "";
  }
}
</style>
